<template>
  <div class="details_progress">
    <div class="progress_item" v-for="(item,index) in progressList.list">
      <div class="left">
        <div class="head"></div>
        <div class="line" :class="{'line_last':index==progressList.list.length-1}"></div>
      </div>
      <div class="right">
        <span class="label">{{ item.time }}</span>
        <div class="right_content">
          <div>
            <span>【{{ item.user }}】</span>
            <span>{{ item.content }}</span>
          </div>
          <div class="imgList">
            <img :src="item2" alt="" v-for="item2 in item.imgList" v-if="item.imgList">
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">

let progressList = reactive({
  list: [
    {
      time: '2024-04-03 18:39:09',
      user: '生产管理部-管理1部：吴山',
      imgList: null
    },
    {
      time: '2024-04-03 18:39:09',
      user: '生产管理部-管理1部：吴山',
      content: '处理工单，处理方式：自主处理。处理结果：已处理好。内容备注：维修完成。处理工单，处理方式：自主处理。处理结果：已处理好。内容备注：维修完成。',
      imgList: null
    },
    {
      time: '2024-04-03 18:39:09',
      user: '生产管理部-管理1部：吴山',
      content: '处理工单，处理方式：自主处理。处理结果：已处理好。内容备注：维修完成。',
      imgList: ['https://devoss.omnicity.cn/qrcode/20240723111447_1815586331276435457.png?OSSAccessKeyId=LTAI5t9UZw32jPU7hKd2Prdk&Expires=1727342952&Signature=Sou6l4jm8%2B%2BpRMMRnzacBNl8lB0%3D&response-content-disposition=inline', 'https://devoss.omnicity.cn/qrcode/20240723111447_1815586331276435457.png?OSSAccessKeyId=LTAI5t9UZw32jPU7hKd2Prdk&Expires=1727342952&Signature=Sou6l4jm8%2B%2BpRMMRnzacBNl8lB0%3D&response-content-disposition=inline']
    },
    {
      time: '2024-04-03 18:39:09',
      user: '生产管理部-管理1部：吴山',
      content: '处理工单，处理方式：自主处理。处理结果：已处理好。内容备注：维修完成。',
      imgList: null
    },
  ]
})
</script>

<style lang="scss" scoped>
.details_progress {
  padding-top: 10px;
  line-height: 26px;
  .progress_item {
    display: flex;
  
    .left {
      width: 50px;
      padding-top: 8px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-bottom: -8px;
      

      .head {
        width: 10px;
        height: 10px;
        background: #FFFFFF;
        border-radius: 50%;
        border: 1px solid #DFBB94;
        // border: 1px solid rgb(112, 105, 95);
      }
      .line {
        width: 1px;
        flex: 1;
        background-color: #DFBB94;
        // background-color: rgb(112, 105, 95);
        &.line_last {
          opacity: 0;
        }
      }
    }

    .right {
      flex: 1;
      display: flex;
      padding-bottom: 20px;

      .label {
        width: 200px;
      }

      .right_content {
        flex: 1;

        .imgList {
          display: flex;
          flex-direction: row;

          img {
            width: auto;
            height: 100px;
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>
